<!DOCTYPE html>
<html>
<head>
  <title>anime.js</title>
  <meta charset="utf-8">
  <link rel="icon" type="image/png" href="img/favicon.png" />
  <link rel="apple-touch-icon" href="img/apple-touch-icon.png" />
</head>
<style>

  * {
    margin: 0;
    padding: 0;
  }

  body {
    background-color: black;
    font-family: monospace;
  }

  section {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
  }

  div {
    width: 10vw;
    height: 10vw;
    margin: auto;
    color: white;
    line-height: 10vw;
    text-align: center;
  }

</style>
</head>
<body>
  <section>
    <div class="hex">hex</div>
    <div class="rgb">rgb</div>
    <div class="hsl">hsl</div>
  </section>
  <script src="../anime.js"></script>
  <script>
    var hex = anime({
      targets: '.hex',
      backgroundColor: '#319BFF',
      duration: 2000,
      loop: true
    });
    var rgb = anime({
      targets: '.rgb',
      backgroundColor: 'rgb(49,155,255)',
      duration: 2000,
      loop: true
    });
    var hsl = anime({
      targets: '.hsl',
      backgroundColor: 'hsl(210,100%,60%)',
      duration: 2000,
      loop: true
    });
  </script>
</body>
</html>
